<template>
	<div class="flight-form">
		<h2>添加航班信息</h2>
		<el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
			<el-form-item label="航班号：" prop="flightnum">
				<el-input v-model="form.flightnum" placeholder="请输入航班号" clearable />
			</el-form-item>

			<el-form-item label="飞行日期：" prop="flydate">
				<el-date-picker v-model="form.flydate" type="date" placeholder="请选择飞行日期" value-format="YYYY-MM-DD" />
			</el-form-item>

			<el-form-item label="发出时间：" prop="starttime">
				<el-time-picker v-model="form.starttime" placeholder="请选择发出时间" format="HH:mm" value-format="HH:mm" />
			</el-form-item>

			<el-form-item label="飞行时间：" prop="flytime">
				<el-input v-model="form.flytime" placeholder="例如：2小时30分钟" clearable />
			</el-form-item>

			<el-form-item label="始发地：" prop="startcity">
				<el-select v-model="form.startcity" placeholder="请选择始发地" clearable>
					<el-option v-for="city in cities" :key="city.cityid" :label="city.cityname" :value="city.cityid" />
				</el-select>
			</el-form-item>

			<el-form-item label="目的地：" prop="endcity">
				<el-select v-model="form.endcity" placeholder="请选择目的地" clearable>
					<el-option v-for="city in cities" :key="city.cityid" :label="city.cityname" :value="city.cityid" />
				</el-select>
			</el-form-item>

			<el-form-item label="座位数：" prop="seatnum">
				<el-input-number v-model="form.seatnum" :min="1" :max="1000" />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm">提交</el-button>
				<el-button @click="resetForm">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import axios from 'axios';


	onMounted(() => {
		initdata()
	})

	function initdata() {
		axios.get("http://localhost:8080/getallcity").then(function(res) {
			cities.value = res.data
			console.log(res.data)
		}).catch(function() {

		})
	}

	// 表单数据
	const form = reactive({
		flightnum: '',
		flydate: '',
		starttime: '',
		flytime: '',
		startcity: '',
		endcity: '',
		seatnum: 100
	})

	// 表单验证规则
	const rules = reactive({
		flightnum: [{
			required: true,
			message: '请输入航班号',
			trigger: 'blur'
		}],
		flydate: [{
			required: true,
			message: '请选择飞行日期',
			trigger: 'change'
		}],
		starttime: [{
			required: true,
			message: '请选择发出时间',
			trigger: 'change'
		}],
		flytime: [{
			required: true,
			message: '请输入飞行时间',
			trigger: 'blur'
		}],
		startcity: [{
			required: true,
			message: '请选择始发地',
			trigger: 'change'
		}],
		endcity: [{
			required: true,
			message: '请选择目的地',
			trigger: 'change'
		}],
		seatnum: [{
			required: true,
			message: '请输入座位数',
			trigger: 'blur'
		}]
	})

	// 城市数据 - 实际应用中应该从API获取
	const cities = ref([])

	const formRef = ref(null)

	// 提交表单
	const submitForm = () => {
		formRef.value.validate((valid) => {
			if (valid) {
				// 这里应该是提交到API的逻辑
				console.log('提交数据:', form)
				axios.post("http://localhost:8080/addflightinfo", form).then(function(res) {
					// alert(res.data)
					ElMessage.success('提交成功')
				}).catch(function(res) {

				})
			} else {
				ElMessage.error('请填写完整信息')
				return false
			}
		})
	}

	// 重置表单
	const resetForm = () => {
		formRef.value.resetFields()
	}
</script>

<style>
	.flight-form {
		max-width: 600px;
		margin: 20px auto;
		padding: 20px;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
</style>